<template>
  <!-- 目录条 -->
  <div id="category-bar">
    <div class="category-bar-items" id="category-bar-items">
      <div class="category-bar-item select" id="category-bar-home">
        <a href="">首页</a>
      </div>
      <div class="category-bar-item" v-for="(indexCategory , index) in indexCategoryList" :key="index"
           :id="indexCategory.name">
        <a href="javascript:void(0);" @click="toPath('categories?id=' + indexCategory.id)">{{ indexCategory.name }}</a>
      </div>
    </div>
    <a class="category-bar-more" href="javascript:void(0);" @click="toPath('categories')">更多</a>
  </div>
</template>

<script setup>
import {computed} from 'vue';
import {useRouter} from 'vue-router';
import store from "../../store/index.js";

const router = useRouter();

const indexCategoryList = computed(() => store.state.data.indexCategoryList);

const toPath = (path) => {
  router.push(path)
}
</script>

<style scoped>
</style>
